<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>WebSocket 即时聊天</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="app">
    <header class="app-header">
      <div class="title">
        <h1>WebSocket 聊天</h1>
        <span id="status" class="status status-disconnected">未连接</span>
      </div>
      <div class="connection">
        <input id="wsUrl" type="text" value="ws://1.94.172.236:8080" aria-label="WebSocket 地址" />
        <button id="connectBtn">连接</button>
        <button id="disconnectBtn" disabled>断开</button>
      </div>
    </header>

    <section class="join-bar">
      <input id="nickname" type="text" placeholder="输入你的昵称（默认匿名）" />
      <button id="joinBtn">加入聊天</button>
      <div class="tools">
        <button data-cmd="ping">发送 ping</button>
        <button data-cmd="time">请求时间</button>
        <button data-cmd="stats">查看状态</button>
        <label class="autoscroll">
          <input id="autoScroll" type="checkbox" checked /> 自动滚动
        </label>
      </div>
    </section>

    <main class="chat">
      <ul id="messages" class="messages" aria-live="polite" aria-relevant="additions"></ul>
    </main>

    <footer class="composer">
      <input id="messageInput" type="text" placeholder="输入消息，回车发送" />
      <button id="sendBtn" disabled>发送</button>
    </footer>

    <section class="tips">
      <p>提示：</p>
      <ul>
        <li>本页面会直连 WebSocket 服务。默认地址 ws://1.94.172.236:8080。</li>
        <li>如果你看到仅“单端回显”而非“群聊广播”，请启用后端广播（我可帮你改 main.cpp）。</li>
        <li>点击“发送 ping / 请求时间 / 查看状态”可测试服务端预置指令。</li>
      </ul>
    </section>
  </div>

  <script src="app.js"></script>
</body>
</html>